<template>
  <div class="el-tabs__content">
    <el-card>
      <div class="minddle-card">
        <div
          class="item1"
          :style="{backgroundImage:'url('+bg+')',backgroundRepeat:'no-repeat',backgroundSize:'100% 100%'}"
        >
          <div>今日受伤人数</div>
          <div>0人</div>
        </div>
        <div
          class="item2"
          :style="{backgroundImage:'url('+cg+')',backgroundRepeat:'no-repeat',backgroundSize:'100% 100%'}"
        >
          <div>本周受伤人数</div>
          <div>0人</div>
        </div>
        <div
          class="item3"
          :style="{backgroundImage:'url('+dg+')',backgroundRepeat:'no-repeat',backgroundSize:'100% 100%'}"
        >
          <div>本年度受伤人数</div>
          <div>0人</div>
        </div>
      </div>
    </el-card>
    <el-card class="col-left">
      <el-row>
        <el-col :span="24" class="col-pict">
          <span class="traing"></span>数据图显示情况
          <span class="traing"></span>
        </el-col>
        <el-col :span="12" class="message-data">
          <div>
            <span>
              <img src="@/assets/image/left.png" />
            </span>各受伤部位占比
            <span>
              <img src="@/assets/image/right.png" />
            </span>
          </div>
          <div class="nowtimes">至今</div>
          <div id="string-massage"></div>         
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import icons from "@/assets/image/item1.png";
import bill from "@/components/echarts/bill";
import {mantotal} from "@/api/monitor/logininfor";
export default {
  components: { bill },
  data() {
    return {
      bg: require("@/assets/image/item1.png"),
      cg: require("@/assets/image/item2.png"),
      dg: require("@/assets/image/item3.png"),
    };
  },
  mounted() {
    // this.inittotal("string-massage");
  },
  created(){
      this.totalmans();
     
  },
  methods: {
    // inittotal(element) {
    //   var myChart = this.$echarts.init(document.getElementById(element));
    //   // 绘制图表
    //   myChart.setOption({
    //     tooltip: {
    //       trigger: "item",
    //       formatter: "{b}: {c} ({d}%)",
    //     },
    //     legend: {
    //       orient: "vertical",
    //       left: 10,
    //       data: this.proportionName,
    //     },
    //     series: [
    //       {
    //         // name: "访问来源",
    //         type: "pie",
    //         radius: ["50%", "70%"],
    //         avoidLabelOverlap: false,
    //         label: {
    //           show: false,
    //           position: "center",
    //         },
    //         emphasis: {
    //           label: {
    //             show: true,
    //             fontSize: "30",
    //             fontWeight: "bold",
    //           },
    //         },
    //         labelLine: {
    //           show: false,
    //         },
    //         data: [...this.proportionArr],
    //       },
    //     ],
    //   });
    // },
    totalmans(){
       mantotal(
         {
           type:this.$route.query.type,
         }
       ).then((res)=>{
          console.log(res);
       }) .catch((err) => {});
    }
  },
};
</script>
<style scoped lang="scss">
.el-tabs__content {
  padding: 20px;
}
.minddle-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.minddle-card .item1,
.item2,
.item3 {
  width: 270px;
  height: 99px;
  background: linear-gradient(90deg, #5272fd 0%, #ca7afd 100%);
  border-radius: 3px;
  text-align: center;
}
.minddle-card .item1,
.minddle-card .item2,
.minddle-card .item3 div {
  line-height: 46px;
  color: #fff;
  font-size: 14px;
  padding-right: 105px;
}
.traing {
  display: inline-block;
  width: 14px;
  height: 8px;
  background-color: #2583ff;
  margin-right: 7px;
  margin-left: 7px;
}
.col-left {
  margin-top: 20px;
  font-size: 15px;
}
.col-pict {
  font-size: 14px;
}
.message-data {
  margin-top: 50px;
  font-size: 14px;
  text-align: center;
}
.nowtimes {
  margin-top: 20px;
  font-size: 13px;
  color: rgba(102, 102, 102, 1);
}
#string-massage {
  width: 400px;
  height: 400px;
}

</style>